import React from 'react'
// ===================================================================== 
import { Modal } from 'antd'
// ===================================================================== 
const { $Lazy} = window
// ===================================================================== 
const Button = $Lazy.load(()=>import('@antd/button'))
// ===================================================================== Modal
class Index extends React.Component {
    state = {
       
    }
	enter = e => {
		const code = e.code
		if(code === 'NumpadEnter' || code === 'Enter'){
			e.preventDefault()
			if(!this.props.okDisabled){
				this.onOk()
			}
		}
	}
	
	componentDidMount(){
		this.props?.onInit?.()
	}
	
	componentWillUnmount(){
		this.removeEnter()
	}
	
	removeEnter = () => { if(this.props.enter){ window.removeEventListener('keydown',this.enter) } }
    
    onOk = () => {
    	const { onOk } = this.props
    	onOk?.()
		this.formRef?.submit?.()
    }
    
    onCancel = () => {
    	const { onCancel} = this.props
    	this.close()
    	onCancel && onCancel()
    }
   
	// 打开
    open = option => {
		const { open, enter } = this.props
		const { formRef, formValue } = option || {}
		
		enter && window.addEventListener('keydown',this.enter)
		
		this.setState({show:true}, () => {
			// 设置表单默认值
			if(formRef){
				const _formValue = this.props.formValue
				if(formValue){
					formRef.setValue(formValue)
				}else if(_formValue){
					formRef.setValue(_formValue)
				}
				this.formRef = formRef
			}
			open?.()
		})
	}
    close = () => {
		const { reset, close } = this.props
		this.setState({show:false}, ()=>{
			// close && close()
		})
		close && close()
		if(reset !== false){
			this.formRef && this.formRef.reset()
		}
	}
    
    Footer = ({ okText, noText, noOk, noCancel, loading, okDisabled, btnSuffix }) => {
		let _okText = ''
		if(this.props.enter){
			_okText = `${okText || '确认'} Enter`
		}else{
			_okText = okText ? okText : '确认'
		}
		
		return (
			<footer className='fxmc'>
				{ !noCancel &&<Button loading={loading} onClick={this.onCancel} style={{width:'100px'}} size='middle' ghost type='primary'>{noText||'取消'}</Button>}
				{ !noOk && <Button loading={loading} disabled={okDisabled} onClick={this.onOk} style={{minWidth:'100px', marginLeft:'25px'}} size='middle' type='primary'>{_okText}</Button> }
				{ btnSuffix }
			</footer>
		)
	}
    
    render(){
    	const { title, children, width, noFooter, centered, onClose, bodyStyle, isFullScroll, isFlex, form, height, minWidth=500, closable = true } = this.props
		const { show } = this.state
    	const visible = show === undefined ? this.props.show : show
    	return (
			<Modal
				className 		= {`${isFullScroll ? 'full-scroll-modal' : ''} ${isFlex ? 'full-flex-modal' : ''}` }
				title			= { title || '提示' }
				width			= { width }
				height 			= { height }
				style			= {{ minWidth }}
				visible 		= { visible }
				onOk			= { this.onOk }
				onCancel		= { this.onCancel }
				closable		= { closable }
				maskClosable 	= { false }
				centered		= { centered===undefined ? true : centered }
				footer			= { noFooter ? null : <this.Footer {...this.props} /> }
				destroyOnClose 	= { true }
				afterClose 		= { ()=>{
					onClose && onClose()
					form && form.reset()
					this.removeEnter()
					
				} }
				bodyStyle 		= { { padding:'15px 15px 0', ...bodyStyle } }
				forceRender		= { true }
			>
				{ children }
			</Modal>
		)
    }
}
export default Index